<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人分类汇总报表</title>
    <style>
        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 2.5rem;
            font-weight: 300;
        }
        .header p {
            margin: 10px 0 0;
            font-size: 1.1rem;
            opacity: 0.9;
        }
        .chart-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .chart-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        }
        .chart-title {
            text-align: center;
            color: #2c3e50;
            font-weight: 500;
            font-size: 1.8rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }
        .chart-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
            border-radius: 3px;
        }
        #barChartDiv {
            width: 100%;
            height: 600px;
        }
        .data-summary {
            display: flex;
            justify-content: space-around;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        .summary-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            min-width: 200px;
            margin: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            text-align: center;
            transition: all 0.3s ease;
        }
        .summary-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        .summary-value {
            font-size: 2rem;
            font-weight: 300;
            color: #2c3e50;
            margin: 10px 0;
            background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .summary-label {
            color: #7f8c8d;
            font-size: 1rem;
            font-weight: 500;
        }
        .trend-indicator {
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .trend-up {
            color: #4CAF50;
        }
        .trend-down {
            color: #F44336;
        }
        .trend-neutral {
            color: #FFC107;
        }
        .last-updated {
            text-align: center;
            color: #95a5a6;
            font-size: 0.9rem;
            margin-top: 30px;
        }
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            .summary-card {
                min-width: 120px;
                padding: 15px;
            }
            .summary-value {
                font-size: 1.5rem;
            }
            #barChartDiv {
                height: 450px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>联系人分类汇总分析</h1>
        <p>全面了解您的联系人分布情况</p>
    </div>

    <div class="chart-container">
        <h2 class="chart-title">联系人分类统计柱状图</h2>
        <div id="barChartDiv"></div>

        <div class="data-summary">
            <div class="summary-card">
                <div class="summary-label">总联系人数量</div>
                <div class="summary-value" id="totalContacts">1,248</div>
                <div class="trend-indicator trend-up">↑ 12% 较上月</div>
            </div>
            <div class="summary-card">
                <div class="summary-label">分类数量</div>
                <div class="summary-value" id="categoryCount">8</div>
                <div class="trend-indicator trend-neutral">→ 与上月持平</div>
            </div>
            <div class="summary-card">
                <div class="summary-label">最大分类</div>
                <div class="summary-value" id="largestCategory">客户</div>
                <div class="trend-indicator">占比 36%</div>
            </div>
            <div class="summary-card">
                <div class="summary-label">新增本月</div>
                <div class="summary-value" id="newThisMonth">142</div>
                <div class="trend-indicator trend-up">↑ 8% 较上月</div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />

<script th:inline="javascript">
    /*<![CDATA[*/
    // 获取后端传递的数据
    const dataCountByCategory = [
        {count: 450, name: "客户", trend: "up", change: 15},
        {count: 220, name: "供应商", trend: "up", change: 8},
        {count: 180, name: "合作伙伴", trend: "down", change: 5},
        {count: 150, name: "同事", trend: "up", change: 12},
        {count: 120, name: "朋友", trend: "neutral", change: 0},
        {count: 80, name: "家人", trend: "up", change: 3},
        {count: 32, name: "校友", trend: "down", change: 2},
        {count: 16, name: "其他", trend: "neutral", change: 0}
    ];

    // 处理数据
    const categories = [];
    const barData = [];
    const colors = ['#6a11cb', '#2575fc', '#00b4d8', '#00e5ff', '#00c853',
                   '#64dd17', '#aeea00', '#ffd600', '#ffab00', '#ff6d00'];

    // 计算总联系人数量
    const totalContacts = dataCountByCategory.reduce((sum, item) => sum + item.count, 0);
    document.getElementById('totalContacts').textContent = totalContacts.toLocaleString();
    document.getElementById('categoryCount').textContent = dataCountByCategory.length;

    // 找出最大分类
    const largestCategory = dataCountByCategory.reduce((max, item) =>
        item.count > max.count ? item : max, {count: 0, name: ""});
    document.getElementById('largestCategory').textContent = largestCategory.name;

    // 模拟本月新增联系人
    const newThisMonth = Math.floor(totalContacts * 0.12);
    document.getElementById('newThisMonth').textContent = newThisMonth;

    // 准备图表数据
    dataCountByCategory.forEach((item, index) => {
        categories.push(item.name);
        barData.push({
            name: item.name,
            value: item.count,
            itemStyle: {
                color: colors[index % colors.length]
            },
            label: {
                show: true,
                position: 'top',
                formatter: function(params) {
                    const percent = ((params.data.value / totalContacts) * 100).toFixed(1);
                    return `${params.data.name}\n${params.data.value} (${percent}%)`;
                },
                color: '#2c3e50',
                fontSize: 12,
                fontWeight: 'normal',
                lineHeight: 20
            }
        });
    });

    // 初始化 ECharts 实例
    const barChart = echarts.init(document.getElementById('barChartDiv'));

    // 配置项
    const barOption = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = params[0].data;
                const percent = ((data.value / totalContacts) * 100).toFixed(1);
                return `
                    <div style="font-weight:bold;margin-bottom:5px;color:${params[0].color}">${data.name}</div>
                    <div>数量: <span style="font-weight:bold">${data.value}</span></div>
                    <div>占比: <span style="color:#4CAF50">${percent}%</span></div>
                    <div>趋势: <span style="color:${data.trend === 'up' ? '#4CAF50' : data.trend === 'down' ? '#F44336' : '#FFC107'}">
                        ${data.trend === 'up' ? '↑' : data.trend === 'down' ? '↓' : '→'} ${data.change}% 较上月
                    </span></div>
                `;
            },
            backgroundColor: 'rgba(255,255,255,0.98)',
            borderColor: '#e0e0e0',
            borderWidth: 1,
            textStyle: {
                color: '#2c3e50'
            },
            extraCssText: 'box-shadow: 0 8px 24px rgba(0,0,0,0.15);border-radius: 8px;padding: 15px;'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLine: {
                lineStyle: {
                    color: '#e0e0e0'
                }
            },
            axisLabel: {
                rotate: 30,
                fontSize: 12,
                color: '#7f8c8d',
                margin: 15
            },
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    color: '#e0e0e0'
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '联系人数量',
            nameTextStyle: {
                color: '#7f8c8d',
                padding: [0, 0, 0, 40],
                fontSize: 12
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#e0e0e0'
                }
            },
            axisLabel: {
                color: '#7f8c8d',
                formatter: function(value) {
                    return value.toLocaleString();
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#f0f0f0'
                }
            }
        },
        series: [{
            name: '联系人数量',
            type: 'bar',
            barWidth: '60%',
            data: barData,
            itemStyle: {
                borderRadius: [4, 4, 0, 0],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 8,
                shadowOffsetY: 3
            },
            emphasis: {
                itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 12,
                    shadowOffsetY: 5
                }
            },
            animationDelay: function (idx) {
                return idx * 100;
            }
        }],
        animationDuration: 1500,
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 100;
        }
    };

    // 使用配置项
    barChart.setOption(barOption);

    // 响应式调整
    window.addEventListener('resize', function() {
        barChart.resize();
    });

    // 显示最后更新时间
    const now = new Date();
    const lastUpdated = document.createElement('div');
    lastUpdated.className = 'last-updated';
    lastUpdated.textContent = `最后更新时间: ${now.toLocaleString()}`;
    document.querySelector('.container').appendChild(lastUpdated);
    /*]]>*/
</script>
</body>
</html>